<template>
    <div class="basic">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>舞蹈基本功</span>
                    <el-button type="primary" style="float: right;" @click="winopen">导出</el-button>
                    <el-button type="primary" style="float: right;" @click="submit">保存</el-button>
                </div>
            </template>
            <el-table :data="tableData.value" v-if="tableData.value?.length > 0" border
                style="width: 100%;height: calc(100vh - 250px);">
                <!-- <el-table-column type="index" fixed label="序号" width="180" /> -->
                <el-table-column prop="number" label="序号" width="180" >
                    <template #default="scope">
                        <el-input v-model="scope.row.number"></el-input>
                    </template>
                </el-table-column>
                <el-table-column :label="item.name" v-for="(item, index) in judgelist.value" :key="item.id">
                    <template #default="scope">
                        <!-- {{ scope.row.children?.[index]?.fraction }} -->
                        <el-input-number v-if="scope.row.children?.[index]" v-model="scope.row.children[index].fraction"></el-input-number>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="评分一">
                    <template #default="scope">
                        {{ averageone(scope.row.children) }}
                    </template>


                </el-table-column> -->
                <el-table-column label="平均分">
                    <template #default="scope">
                        {{ averagetwo(scope.row.children) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <!-- <el-button link type="primary" size="small" @click="editdialog(scope.row)">编辑</el-button> -->
                        <!-- <el-button link type="primary" size="small" @click="submit(scope.row)">保存</el-button> -->
                        <el-button link type="primary" size="small" @click="deltab(scope.row)">删除</el-button>
                    </template>


                </el-table-column>
            </el-table>

            <el-button class="mt-4" type="primary" plain style="margin-top:30px; width: 100%"
                @click="opendialog">新增</el-button>
        </el-card>

        <accountdialog v-if="dialogVisible" :dialogVisible="dialogVisible" :linkid="1" :tabdata="tabdata.value"
            @cancal="cancal"></accountdialog>
    </div>
</template>
    
<script setup lang='ts' >
import accountdialog from "../../component/accountdialog/accountdialog.vue"
import { reactive, ref } from 'vue'
import { scoreList, raterList, achievement, del_fraction ,score} from "../../api/api"
let tableData: any = reactive({ value: [] })
let scorelistdata = reactive({value:{}})
const getlist = () => {
    tableData.value = []
    scoreList({ link_id: 1, pagesize: 999 }).then(res => {
        res.data.forEach((item: any, index: number) => {
            scorelistdata.value = { number: '', children: item }
            tableData.value.push({ number: item[0].number, children: item })
        })
        console.log(tableData.value)
    })

}


let judgelist = reactive({ value: [] })
const getjudgelist = () => {
    raterList().then(res => {
        judgelist.value = res.data
        console.log(judgelist.value)
    })
    getlist()
}
getjudgelist()
let dialogVisible = ref(false)
const opendialog = () => {  

    // dialogVisible.value = true
    // tableData.value.push(scorelistdata.value)
    // console.log( tableData.value)
    let judlist = reactive({value:[]})
    judgelist.value.forEach((item,index)=>{
        console.log(item)
        judlist.value.push({link_id:1,rater_id:item.id,fraction:''})
    })
    console.log( judlist.value)
    tableData.value.push({number:'',children:judlist.value})
    console.log( tableData.value)
}

const cancal = () => {
    getlist()
    dialogVisible.value = false
    tabdata.value = []
}

const submit = (value:any)=>{
    console.log(tableData.value)
    tableData.value.forEach((item,index)=>{
        console.log(item.children)
        item.children.forEach((itema,indexa)=>{
            itema.number =item.number
          
        })
    })
    console.log( tableData.value)
    score({link_id:1,data:tableData.value}).then((res=>{
        console.log(res)
    }))
}


const averageone = (arr: any) => {
    let total = 0
    arr.forEach((item: any, index: number) => {
        total += item.fraction
    })
    return total / arr.length ? total / arr.length.toFixed(2) : '-'
}

const averagetwo = (arr: any) => {
    let arrnum: any = []
    arr.forEach((item: any, index: number) => {
        arrnum.push(item.fraction)
    })

    if (arrnum.length < 3) {
        throw new Error("Array must have at least three elements to remove min and max.");
    }

    // 先排序数组
    arrnum.sort((a, b) => a - b);

    // 去掉最小值和最大值
    const trimmedArr = arrnum.slice(1, -1);

    // 计算剩余元素的总和
    let sum = trimmedArr.reduce((total, num) => total + num, 0);

    // 返回平均值
    return sum / (trimmedArr.length) ? (sum / (trimmedArr.length)).toFixed(2) : '-'
}

let tabdata: any = reactive({ value: [] })
const editdialog = (item: any) => {
    dialogVisible.value = true
    item.children.forEach((item: any, index: number) => {
        delete item.link_id
    })
    tabdata.value[0] = item

}

const deltab = (item: any) => {
    del_fraction({ link_id: 1, number: item.number }).then(res => {
        getlist()
    })

}

const winopen = () => {
    achievement({ link_id: 1 }).then((res: any) => {
        const blob = new Blob([res],);
        const linkNode = document.createElement("a");
        linkNode.download = '舞蹈基本功.doc';
        linkNode.style.display = "none";
        linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
        document.body.appendChild(linkNode);
        linkNode.click(); //模拟在按钮上的一次鼠标单击
        URL.revokeObjectURL(linkNode.href); // 释放URL 对象
        document.body.removeChild(linkNode);
    })
}
</script>
    
<style lang="less" scoped>
.basic {

    // background: white;
    // padding: 30px;
    .el-card {
        min-height: calc(100vh - 104px);

    }
}
</style>